<template>
  <div class="special-button relative w-[180px] h-[50px]">
    <div class="bg z-1 absolute top-0 left-0 w-full h-full">
      <div class="bg-main w-full h-full"></div>
      <svg version="1.1" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="triangle absolute bottom-0 left-0 w-[20px] h-[20px]">
        <path d="M0 0 L0 10 L10 10 Z"/>
      </svg>
      <svg version="1.1" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="triangle absolute bottom-0 right-0 w-[20px] h-[20px]">
        <path d="M0 10 L10 10 L10 0 Z"/>
      </svg>
    </div>
    <div class="bg bg-after absolute z-0 top-[7px] left-[3.5px] w-[173px] h-[48px] opacity-[0.45]">
      <div class="bg-main w-full h-full"></div>
      <svg version="1.1" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="triangle absolute bottom-0 left-0 w-[18px] h-[18px]">
        <path d="M0 0 L0 10 L10 10 Z"/>
      </svg>
      <svg version="1.1" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="triangle absolute bottom-0 right-0 w-[18px] h-[18px]">
        <path d="M0 10 L10 10 L10 0 Z"/>
      </svg>
    </div>
    <button class="content relative z-2 text-white flc w-full h-full">
      <span>{{ buttonText }}</span>
    </button>
  </div>
</template>
<script
  lang="ts"
  setup
  name="SpecialButton"
>
defineProps({
  buttonText: {
    type: String, required: true, default: '确定',
  },
})
</script>

<style
  scoped 
  lang="scss"
>
  .special-button {
    .bg {
      .bg-main {
        background: rgba(17, 45, 101, 0.25);
        border-radius: 4px; 
        box-shadow: inset 0px 0px 48px rgba(0, 163, 255, 0.65);
        @include set-clip(polygon(0 0, 0 50%, 25px 100%, 155px 100%, 100% 50%, 100% 0));
        @include set-backdrop(10px);
      }
      .triangle {
        fill: rgba(47,121,235,0.25);
        stroke: rgba(46, 100, 179,0.45);
      }
      &.bg-after{
        .bg-main{
          @include set-clip(polygon(0 0, 0 50%, 24px 100%, 149px 100%, 100% 50%, 100% 0));
        }
      }
    }
    &:active{
      .bg:not(.bg-after) {
        .bg-main{
          background: rgba(17, 45, 101, 0.45);
          box-shadow: inset 0px 0px 62px rgba(128, 209, 255, 0.75)
        }
        .triangle{
          fill: rgba(17, 45, 101, 0.45);
          stroke: rgba(128, 209, 255, 0.45);
        }
      }
    }
  }
</style>
